<template>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="SPU名称"> {{ skuInfo.spuName }}</el-form-item
      ><el-form-item label="SKU名称">
        <el-input
          v-model="skuName"
          placeholder="SKU名称"
          style="width: 400px"
        ></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input
          v-model="price"
          placeholder="价格(元)"
          type="number"
          style="width: 400px"
        ></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input
          v-model="weight"
          placeholder="重量(千克)"
          type="number"
          style="width: 400px"
        ></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input
          v-model="skuDesc"
          placeholder="规格描述"
          style="width: 400px"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 8 }"
        ></el-input>
      </el-form-item>
      <el-form-item label="平台属性"
        ><el-form :inline="true" label-width="80px">
          <el-form-item
            :label="attrInfo.attrName"
            v-for="attrInfo in attrInfoList"
            :key="attrInfo.id"
            style="margin-bottom: 10px"
          >
            <el-select v-model="attrInfo.idOrAttrId" placeholder="请选择">
              <el-option
                v-for="item in attrInfo.attrValueList"
                :key="item.id"
                :label="item.valueName"
                :value="`${attrInfo.id}:${item.id}`"
              >
              </el-option>
            </el-select> </el-form-item></el-form
      ></el-form-item>
      <el-form-item label="销售属性"
        ><el-form :inline="true" label-width="80px">
          <el-form-item
            v-for="saleAttrValue in spuSaleAttrValueList"
            :key="saleAttrValue.id"
            style="margin-bottom: 10px"
            :label="saleAttrValue.saleAttrName"
          >
            <el-select v-model="saleAttrValue.idOrSpuId" placeholder="请选择">
              <el-option
                v-for="item in saleAttrValue.spuSaleAttrValueList"
                :key="item.id"
                :label="item.saleAttrValueName"
                :value="`${saleAttrValue.id}:${item.id}`"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表"
        ><el-table
          style="width: 100%"
          :data="skuImageList"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="图片" width="width" align="center">
            <template slot-scope="{ row, $index }">
              <img :src="row.imgUrl" style="width: 100px; height: 100px" />
            </template>
          </el-table-column>
          <el-table-column
            label="名称"
            prop="imgName"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" width="width" align="center">
            <template slot-scope="{ row, $index }">
              <el-button
                v-if="row.isDefault == 0"
                type="primary"
                @click="changeDefault(row)"
                >设置默认</el-button
              >
              <el-button v-else type="success">默认</el-button></template
            >
          </el-table-column>
        </el-table></el-form-item
      >
      <el-form-item
        ><el-button type="primary" @click="saveSkuFrom">保存</el-button
        ><el-button @click="cancel">取消</el-button></el-form-item
      >
    </el-form>
  </div>
</template>

<script>
export default {
  name: "skuFrom",
  data() {
    return {
      categoryID: {}, //三级联动id
      skuInfo: {},
      skuName: "",
      price: "",
      weight: "",
      skuDesc: "",
      spuSaleAttrValueList: [], //销售属性
      skuImageList: [], //图片列表
      checkSaleAttrId: "", //选中的销售属性
      attrInfoList: [], //平台属性
      skuDefaultImg: "", //设置默认图片
      checkSkuImageList: [], //选中的图片
    };
  },
  methods: {
    //获取数据
    getSkuFromData(categoryID, skuInfo) {
      this.categoryID = categoryID;
      this.skuInfo = skuInfo;
      this.getData();
    },
    //获取数据
    async getData() {
      let attrInfoList = await this.$api.spu.getAttrInfoList(this.categoryID);
      attrInfoList.data.forEach((element) => {
        element.idOrAttrId = ""; //平台属性选中的标识
      });
      this.attrInfoList = attrInfoList.data;
      let spuSaleAttrValueList = await this.$api.spu.getSpuSaleAttrList(
        this.skuInfo.id
      );
      spuSaleAttrValueList.data.forEach((element) => {
        element.idOrSpuId = ""; //销售属性选中的标识
      });
      this.spuSaleAttrValueList = spuSaleAttrValueList.data;
      let skuImageList = await this.$api.spu.getSpuImageList(this.skuInfo.id);
      skuImageList.data.forEach((element) => {
        element.isDefault = 0; //1 图片设置为默认值
      });
      this.skuImageList = skuImageList.data;
    },
    //表格图片 选中
    handleSelectionChange(val) {
      val.forEach((element) => {
        element.skuImgId = element.spuId;
        delete element.spuId;
        delete element.id;
      });
      this.checkSkuImageList = val;
    },
    //图片设置为默认值
    changeDefault(row) {
      this.skuImageList.forEach((element) => {
        element.isDefault = 0; //1 图片设置为默认值
      });
      row.isDefault = 1;
    },
    //取消
    cancel() {
      this.$emit("changeScene", 0);
    },
    //保存skuFrom
    async saveSkuFrom() {
      let skuImage = this.skuImageList.filter((element) => {
        return element.isDefault === 1;
      });
      this.skuDefaultImg = skuImage[0]?.imgUrl;
      let saleAttrValue = this.spuSaleAttrValueList.filter((element) => {
        return element.idOrSpuId !== "";
      });
      let skuSaleAttrValueList = [];
      if (saleAttrValue !== undefined && saleAttrValue.length > 0) {
        saleAttrValue.forEach((element) => {
          let saleAttr = element.idOrSpuId.split(":");
          let obj = {
            saleAttrId: saleAttr[0],
            saleAttrValueId: saleAttr[1],
          };
          skuSaleAttrValueList.push(obj);
        });
      }
      let attrInfoList = this.attrInfoList.filter((element) => {
        return element.idOrAttrId !== "";
      });
      let skuAttrValueList = [];
      if (attrInfoList !== undefined && attrInfoList.length > 0) {
        attrInfoList.forEach((element) => {
          let attr = element.idOrAttrId.split(":");
          let obj = {
            attrId: attr[0],
            attrValueId: attr[1],
          };
          skuAttrValueList.push(obj);
        });
      }
      //收集数据
      let obj = {
        skuName: this.skuName,
        price: this.price,
        weight: this.weight,
        skuDesc: this.skuDesc,
        category3Id: this.categoryID.category3Id,
        spuId: this.skuInfo.id,
        skuDefaultImg: this.skuDefaultImg,
        skuAttrValueList: skuAttrValueList,
        skuAttrValueList: skuAttrValueList,
        skuImageList: this.checkSkuImageList,
      };
      let res = await this.$api.spu.saveSkuInfo(obj);
      if (res.code == 200) {
        this.$emit("changeScene", 0);
        this.$message({
          type: "success",
          message: "保存成功",
        });
      }
    },
  },
  computed: {
    selectedOptions() {
      return;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>